 /*
     事件：文档或浏览器窗口中发生的一些特定的交互瞬间。例如：关闭窗口、点击鼠标、按下键盘上的某个按键
     浏览器捕获事件，并调用javascript代码来响应事件
     */
	 window.onload=function(){
    /*
     一、事件流
     事件是页面上的某种操作，事件的源头是用户
     javascript中的事件也是注册事件、页面的某个组件注册了某种事件，并且与该事件绑定了响应的事件处理程序
     画在一张纸上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上所有圆。如果你打击了某个按钮，单击事件不仅仅发生在按钮上。换句话
     说，在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。
     事件流描述的是从页面接受事件的顺序。IE的事件流是事件冒泡流，firefox的事件流是事件捕获流(firefox和chrome支持两种)
     1、事件冒泡
     事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
     2、事件捕获
     不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用以在于事件到达预定目标之前捕获它

     */


         var btn = document.getElementById("btn");

    /*事件注册:
	1.绑定到元素的属性(这样会创建一个封装这元素属性值(event)的函数,
    通过event变量，可以直接访问事件对象，在函数内部，this值等于事件的目标元素(	因为事件处理程序的作用域时根据指定它的方式来确定的)
    2.绑定到对象的属性
    例1：大小写转换 按钮 upperAndLower.html
    例2: 事件处理函数的返回值，影响事件的默认动作 form.html
    1、return false 2、get、post




    btn.onclick=function (event) {
        alert(event.eventPhase);

    }
     */

    /*
    事件被覆盖的情况
    用Dom2级事件处理程序

    btn.addEventListener("click",function(event){
        alert(event.eventPhase);
    },true)
     */
	
	    /*
     3、DOM事件流
     “DOM2级事件”规定的事件流包括三个阶段：
     事件捕获阶段、处于目标阶段和事件冒泡阶段。
     在Dom事件流中，实际的目标（button)在补货阶段不会接收到事件、
     这就意味着在捕获阶段，事件从document到html再到body后就停止了.
     下一个阶段是“处于目标阶段，于是事件在button上发生，并在事件处理中
     被看做冒泡阶段的一部分。然后冒泡阶段发生，事件又传回文档

     多数支持DOM事件的浏览器都实现了一种特定的行为;即使“DOM2级事件明确要求
     捕获阶段不会涉及事件目标，但IE9 safari chrom firefox都会在捕获阶段
     触发事件对象上的事件。结果就是有两个机会在目标对象上操作事件
     */

	/*
	btn.onclick=function(){		
	
		alert('第一次');
		}
	btn.onclick=function(){
	
		alert('第二次');
		}
	
	
	
	//解决方法：addEventListener可以添加多个事件处理程序
	btn.addEventListener("click",function(){alert('第一次');},false);
	
	btn.addEventListener("click",function(){alert('第二次');},false);
	
	*/
	
	/*IE:对象.attacheEvent("事件(on)","处理程序") detachEvent
	FF 对象AddEventListener("事件（on)"，"处理程序) removeEventListener
	btn.attachEvent("onclick",function(){alert('第一次');});
	btn.attachEvent("onclick",function(){alert('第二次');});
	*/


	
	//removeEventListener()传入的参数与添加处理程序的参数相同
	


	/*
	事件对象event，这个对象中包含着所有与事件相关的信息：导致事件的元素
	事件的类型
	其它与特定事件相关的信息
	type
	currentTarget 直接将事件制定给了目标元素，==this ==target
	
	
	btn.addEventListener("click",function(event){alert(event.target.id);},false);
	
	btn.addEventListener("click",function(event){alert(event.type);},false);
	
	
	document.body.addEventListener("click",function(event){
		alert("开始触发body上的"+event.type+"事件,阶段："+event.eventPhase);
		alert(event.currentTarget==document.body);
		alert(this==document.body);
		alert(event.target==this);
	},false);
	*/
	
	/*
	需要通过一个函数处理多个事件时，可以使用type属性
	*/


	/*
	要阻止特定事件的默认行为，可以使用preventDefault()方法
	链接的默认行为就是在被单击时会导航到其href特性制定的URL,如果想要阻止这种
	默认行为，通过onclick事件取消它

	var link = document.getElementById("mylink");
	link.addEventListener("click",function(event){
		if(event.cancelable)
			event.preventDefault();
		alert("daji");
	},false);
     */
/*
	stopPropagation()方法用于立即停止事件DOM层的传播,来取消进一步的事件捕获和冒泡
		直接添加到一个按钮的事件处理程序可以调用，避免触发注册在body上的事件处理程序

	btn.addEventListener("click",function(event){
		alert("触发按钮上的"+event.type+"事件,阶段："+event.eventPhase);
		
	//	event.stopPropagation();
	},false);
	
	document.body.addEventListener("click",function(event){
		alert("触body上的"+event.type+"事件,阶段："+event.eventPhase);
		
	//	event.stopPropagation();
	},false);

         document.body.addEventListener("click",function(event){
             alert("触body上的"+event.type+"事件,阶段："+event.eventPhase);

             //	event.stopPropagation();
         },true);
	
	document.body.onclick=function(event){
			alert("触发body上的"+event.type+"事件,阶段："+event.eventPhase);
		
	}
 */
	
	
	
	/*
	IE中的事件对象:同样包含创建它的事件相关的属性和方法
	因为事件处理程序的作用域时根据指定它的方式来确定的，所以不能认为this
	会时钟指向事件目标，故而，最好还是使用event.srcElement比较保险
	
	btn.onclick=function(){
		alert(event==window.event);
		alert(window.event.type);
	}
	
	btn.onclick=function(event){
		alert(event==window.event);
		alert(window.event.type);
	}
	
	btn.addEventListener("click",function(event){
		alert(event===window.event);
	},false);



	document.body.addEventListener("click",function(event){
		alert(this===window.event.srcElement);
		alert(event.srcElement===this);
	},false);
     */

    /*
     window对象常用事件 onscroll onresize onload
     可以滚动的漂浮的广告.html
     
	 window.addEventListener("resize",function(event){
		// alert("resize");
	 },false);
	 window.addEventListener("scroll",function(event){
		 document.write("body:("+document.documentElement.scrollLeft+","+document.documentElement.scrollTop+")");
	 },false);
	 */




         /*
	window.addEventListener("mousedown",function(event){
		document.getElementById("pos").value=event.clientX+","+event.clientY;
        if(event.button==0)
        {
            alert("按下了鼠标左键")
        }else if(event.button==2)
        {
            alert("按下了鼠标右键")
        }

	},false);


	document.body.addEventListener("mousemove",function(event){
		document.getElementById("pos").value=event.clientX+","+event.clientY;
		document.getElementById("div0").style.left=event.clientX+"px";
		document.getElementById("div0").style.top=event.clientY+"px";
	},false);
     */

	/*
	修改键
	
	document.addEventListener("click",function(event){
		var keys=new Array();
		if(event.shiftKey)
			keys.push("shift");
			
			if(event.ctrlKey)
			keys.push("ctrl");
			
			if(event.altKey)
			keys.push("alt");
			
			if(event.metaKey)
			keys.push("meta");
			
			
			alert("keys:"+keys);
			
			
	},false);
	*/
	

	/*
	键码：对于数字字母字符键，keycode的值与ascii码中
	对应小写字母或数字的编码相同
	*/

	document.getElementById("txt2").addEventListener("keydown",function(event){
	    if(event.keyCode>47 && event.keyCode<58)
	        return true
        else
            return false;
    })

         /*
         document.addEventListener("keyup",function(event){
		alert(event.keyCode);
	},false);
	*/


	

     /*
     6、Document对象常用事件 onkeydown ondrag
    */

    /*

     7、表单元素常用事件
     表单对象 onsubmit
     文本框 onblur onfocus onchange
     按钮对象 onclick
     复选框对象onblur onfocus onclick
     单选框 onblur onfocus onclick
     下拉列表框对象 onblur onfocus onchange

	  提交表单：方法1 ：onsubmit
	  <input type="submit" value="submit">
	  <button type="submit"></button>
	  <input type="image" src="dkf.gif">
	  
	  方法2： form.submit();
	  
	  为了防止多次提交表单，禁用
	  
	  
	  重置表单
	  <input type="reset" value="reset">
	  button type="reset">reset</button>
	  
	  表单字段：elements表示所有元素的集合
	  disabled form name readonly tabindex type value
	  focus
	  blur
	  select selectionStart,selectionEnd
	  setSelectionRange()
	  selectText()
	  tabForward()
	  
	  
	  
	  如果有多个表单控件都在使用一个name，那么久会返回以该name明明的一个nodelist
     */
	 
	 

    /*
    8、IE的Event事件
     */



    /*
     二、事件处理程序
     事件就是用户或浏览器自身执行的某种动作。诸如click、load、mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序
     1、HTML事件处理程序
     某个元素支持的每种事件，都可以使用一个与响应事件处理程序同名的HTML特性来指定
     2、DOM0级事件处理程序
     通过javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方式在第四代web浏览器中出现的
     1、简单，二、具有跨浏览器的优势
     3、DOM2级事件处理程序
     4、IE事件处理程序
     5、跨浏览器的事件处理程序
     */




    /*
    三、事件对象
    在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件相关的信息。包含导致事件的元素、事件的类型以及其它特定事件相关的信息
    1、DOM中的事件对象
    将一个event对象传入到事件处理程序中。无论指定事件处理程序使用什么方法


    /
    2、IE中的事件对象
    3、跨浏览器的事件对象

    */


    /*

    四、事件类型
    1、UI事件
    2、焦点事件
    3、鼠标与滚轮事件
    4、键盘与文本事件
    5、复合事件
    6、变动事件
    7、HTL5事件
    8、设备事件
    9、触摸与手势事件

    五、内存与性能
    六、模拟事件

     */
	 }

